<template>
  <div class="user app-container">
    <nav-bar
      :title2="user.name"
      :show-title2="showTitle2"
      leftArrow
      fixed
      :background="NavBarBgColor"
      :color="NavBarColor"
    />
    <div class="background-img" ref="Img">
      <img class="img" v-if="user.backgroundImg" alt :src="user.backgroundImg" @load="loadImg">
    </div>

    <scroll class="scroll"
            :probe-type="3"
            listen-scroll
            @scroll="handleScroll"
            ref="scroll">
      <pane class="top1" >
        <img class="avatar" v-if="user.avatar" :src="user.avatar" alt>

        <Loading v-if="loading1" />
        <div class="error" v-else-if="error1" @click="getUserInfo">个人信息载入失败，点击重试！</div>
        <div v-else>
          <div class="flex">
            <span class="userName" v-text="user.name" />
            <img class="vip" v-if="VipImage" :src="VipImage" alt />
          </div>

          <div class="data">
            <div class="follow" v-text="Profile.follows + '关注'" />
            <div class="fans" v-text="Profile.followeds + '粉丝'" />
            <div class="listenSongs" v-text="'已听' + listenSongs + '首'" />
          </div>

          <div class="level-info" v-if="!loading3 && !error3">
            <div class="head">
              <span class="desc">当前等级：</span>
              <span class="level">Lv{{Level}}</span>
            </div>
            <div class="progress">
              <div class="active" :style="{width: (UserLevel.progress * 100)+'%'}"/>
            </div>
            <ul class="needs" v-if="UserLevel.level < 10">
              <li class="listen" v-if="UserLevel.needListen >= 0">还需听歌{{UserLevel.needListen}}首歌</li>
              <li class="login" v-if="UserLevel.needLogin >= 0">还需登录{{UserLevel.needLogin}}天</li>
            </ul>
          </div>
          <div class="error" v-if="error3" @click="getUserLevel">等级信息载入失败，点击重试！</div>

        </div>
      </pane>

      <pane class="info" v-if="!loading1 && !error1">
        <div class="title">基本信息</div>
        <div class="cell">
          <span class="title">村龄：</span>
          <span class="desc">{{formatYear(Profile.createTime)}}</span>
        </div>
        <div class="cell" v-if="Profile.gender">
          <span class="title">性别：</span>
          <span class="desc" v-if="Profile.gender === 1">男</span>
          <span class="desc" v-if="Profile.gender === 2">女</span>
        </div>
        <div class="cell">
          <span class="title">生日：</span>
          <span class="desc">{{formatDate(Profile.birthday)}}</span>
        </div>
      </pane>

      <pane class="record">
        <div class="title padding-bottom-xs">最近听歌排行</div>

        <ul class="songs-loading" v-if="loading2">
          <li class="item" v-for="item in 10" :key="item">
            <div class="content" />
          </li>
        </ul>
        <div class="error" v-else-if="error2" @click="getUserRecord">最近听歌排行载入失败，点击重试！</div>
        <ul class="songs-list" v-else>
          <li class="item" v-for="(item, index) in UserRecords" :key="item.song.id">
            <span class="nums" v-text="index + 1" />
            <div class="content">
              <div class="name">{{item.song.name}}</div>
              <div class="desc">{{formatSinger(item.song)}}</div>
            </div>
            <div class="play-count">
              <icon-svg icon-class="suishenting"/>
              <span>{{item.playCount}}次</span>
            </div>
          </li>
        </ul>
      </pane>

    </scroll>

  </div>
</template>

<script>
import Loading from 'components/loading/loading'
import pane from './pane'
import {GetUserInfo, UserLevelAsync, UserRecordAsync, VipGrowthPointAsync} from 'api/user'
import { formatDate } from 'common/js/utils'

export default {
  name: 'user',
  data () {
    return {
      ImageHeight: 0,
      showTitle2: false,
      NavBarBgColor: 'transparent',
      NavBarColor: 'white',
      scroll: null,

      loading1: false,
      error1: false,
      Profile: {},
      Level: null,
      listenSongs: null,
      VipImage: null,

      loading2: false,
      error2: false,
      UserRecords: [],

      loading3: false,
      error3: false,
      UserLevel: {}
    }
  },
  created () {
    if (!this.user.userId) {
      this.$toast.fail('请登录')
      return
    }
    this.getUserInfo()
    this.getUserRecord()
    this.getUserLevel()
  },
  methods: {
    loadImg () {
      this.ImageHeight = this.$refs.Img.clientHeight || 0
      this.$refs.scroll.$el.style.top = this.ImageHeight + 'px'
      this.refresh()
    },
    getUserInfo () {
      this.loading1 = true
      this.error1 = false
      GetUserInfo(this.user.userId).then(res => {
        this.loading1 = false
        this.Profile = res.profile
        this.Level = res.level
        this.listenSongs = res.listenSongs
        this.refresh()
      }).catch(() => {
        this.error1 = true
        this.loading1 = false
        this.refresh()
      })
      VipGrowthPointAsync().then(res => {
        if (res.userLevel.level) this.VipImage = res.levelCard.redVipWholeImageUrl
      }).catch(() => {
      })
    },
    getUserRecord () {
      this.loading2 = true
      UserRecordAsync(this.user.userId).then(res => {
        console.log(res)
        this.loading2 = false
        this.UserRecords = res
        this.refresh()
      }).catch(() => {
        this.error2 = this.loading2 = false
        this.refresh()
      })
    },
    getUserLevel () {
      this.loading3 = true
      UserLevelAsync().then(data => {
        this.loading3 = false
        data.needListen = data.nextPlayCount - data.nowPlayCount
        data.needLogin = data.nextLoginCount - data.nowPlayCount
        this.UserLevel = data
        this.refresh()
      }).catch(() => {
        this.loading3 = false
        this.error3 = true
        this.refresh()
      })
    },
    handleScroll (e) {
      if (e.y > -this.ImageHeight) {
        this.NavBarBgColor = 'transparent'
        this.NavBarColor = 'white'
        this.showTitle2 = false
      } else {
        this.NavBarBgColor = ''
        this.NavBarColor = ''
        this.showTitle2 = true
      }
      if (e.y < 0) {
        this.$refs.Img.style.transform = `translateY(${e.y}px)`
      } else {
        this.$refs.Img.style.transform = `translateY(${e.y / 2}px) scale(${1 + e.y / this.ImageHeight})`
      }
    },
    refresh () {
      if (this.$refs.scroll) this.$refs.scroll && this.$refs.scroll.refresh()
    },

    formatDate (date) {
      return formatDate('yyyy-MM-dd', new Date(date))
    },
    formatYear (time) {
      const date = new Date(time)
      return `${new Date().getFullYear() - date.getFullYear()}年 (${formatDate('yyyy年MM月注册', date)})`
    },
    formatSinger (song) {
      return song.ar.map(item => item.name).join(' | ')
    }
  },
  computed: {
    user () {
      return this.$store.state.user
    }
  },
  components: { pane, Loading }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";
  @import "~common/style/mixins.less";

  .scroll {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    .scroll-content { background: @color-background }
  }
  .background-img {
    line-height: 0;
    .img { width: 100% }
  }

  .pane {
    >.content {
      >.title {
        text-align: left;
        font-weight: bold;
        font-size: @font-size-large;
      }
      >.loading,>.error {
        margin-top: 29px;
        line-height: @font-size-large;
        font-size: @font-size-small;
        color: @color-text-l;
      }
      .cell {
        padding: 12px 0;
        color: @color-text-l;
        font-size: @font-size-medium;
        text-align: left;
      }
    }
  }

  .top1 {
    position: relative;
    .avatar {
      width: 64px;
      height: 64px;
      position: absolute;
      top: -20px;
      left: 0;
      right: 0;
      margin: 0 auto;
      border: 6px solid @color-base;
      .border-radius(50%)
    }
    .flex {
      margin-top: 29px;
      justify-content: center;
      align-items: center;
      line-height: @font-size-large-x;
      .userName {
        color: @color-text;
        font-size: @font-size-large;
        font-weight: bold;
      }
      .vip {
        padding-left: 8px;
        height: @font-size-large;
      }
    }
    .data {
      padding-top: 12px;
      color: @color-text-ll;
      font-size: @font-size-small-x;
      display: flex;
      justify-content: center;
      .follow::after, .fans::after {
        content: '|';
        padding: 0 8px;
      }
    }
    .level-info {
      margin-top: 15px;
      .head {
        color: @color-text;
        .level {
          color: @color-theme;
          font-size: @font-size-large-x;
          font-style: oblique;
          font-weight: bold;
        }
      }
      .progress {
        width: 90%;
        height: 10px;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        border-radius: 2500px;
        background: @color-background-d;
        .active {
          height: 100%;
          background-color: @color-theme;
          background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);
          background-size: 36px 36px;
          transition: width .6s ease;
          animation: progress 2s linear infinite;
        }
      }
      .needs, li {
        padding: 4px 0;
      }
    }
  }

  .record {
    .songs-loading {
      padding: 8px 0;
      .item {
        padding: 12px 0;
        height: 48px;
        box-sizing: border-box;
        .content {
          height: 100%;
          .border-radius(12px);
          background: @color-hl-background-2;
          animation: breathing 2.4s ease-in-out infinite;
        }
      }
    }
    .songs-list {
      @item-height: 64px;
      .item {
        height: @item-height;
        display: flex;
        align-items: center;
        .nums {
          width: 25px;
          padding-right: 12px;
          color: @color-theme;
          font-size: @font-size-large;
          line-height: @item-height;
        }
        .content {
          height: inherit;
          flex: 1;
          text-align: left;
          overflow: hidden;
          display: flex;
          justify-content: center;
          flex-direction: column;
          .name, .desc { .no-wrap() }
          .name {
            font-size: @font-size-medium-x;
            color: @color-text;
            line-height: @font-size-large-x;
          }
          .desc {
            font-size: @font-size-small;
            color: @color-text-d;
            line-height: @font-size-large;
          }
        }
        .play-count {
          padding: 0 12px;
          color: @color-text-d;
          font-size: @font-size-medium;
          .icon-svg { font-size: @font-size-medium }
        }
      }
    }
  }

  @keyframes breathing {
    50% { opacity: 0.5 }
  }

  @keyframes progress {
    0% { background-position: 0 0 }
    100% { background-position: 36px 0 }
  }
</style>
